---
description: Plasmo offers several ways to easily bundle assets into your browser extension.
---

import { Callout } from "nextra-theme-docs"

# Assets

Extension bundles can include assets such as images, fonts, binary WASM bundles, and other files. Plasmo provides several methods to work with these assets.

## Inline Image

The easiest way to load images inside your extension is to use the `data-base64` scheme. This will inline the image as base64 encoded data in the built bundle of your extension:

```tsx
import someCoolImage from "data-base64:~assets/some-cool-image.png"

...

<img src={someCoolImage} alt="Some pretty cool image" />
```

<Callout emoji="📦">
  Please see this [note about `~` import resolution](/framework/import#tilde-)
</Callout>

## Web Accessible Resources

Plasmo automatically copies any web-accessible resources declared in [the manifest override](/framework/customization/manifest). For example, by specifying the following config in `package.json`:

```json
  "manifest": {
    "web_accessible_resources": [
      {
        "resources": [
          "~raw.js",
          "assets/pic*.png",
          "resources/test.json"
        ],
        "matches": [
          "https://www.plasmo.com/*"
        ]
      }
    ],
    "host_permissions": [
      "https://*/*"
    ]
  }
```

The files below will be copied into the extension bundle and be available to [`chrome.getURL()`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL):

- `raw.js` in the root of the project (where package.json is)
- Any file matching the glob `assets/pic*.png` from the project root
- `resources/test.json` from the project root

See [with-web-accessible-resources](https://github.com/PlasmoHQ/examples/tree/main/with-web-accessible-resources)

### Loading Asset during runtime
If you use a package that dynamically loads an asset (e.g. wasm) during runtime and needs a path to the local asset library, note that you need to make your asset folder available using ~assets, e.g.:
```json
    "web_accessible_resources": [
      {
        "resources": [
          "~assets/wasm/*/**",
        ],
      }
    ],
```
While in your js/ts code you need to refer the folder using the absolute path `/`
```js
wasmPackage.localWASMPath("/assets/wasm/")
```

## Assets from `node_modules`

Sometimes, a node package exposes static assets files you must include in your bundle as web-accessible resources. To do so, specify those assets in the `web_accessible_resources` field of the manifest override in `package.json`:

```json
  "manifest": {
    "web_accessible_resources": [
      {
        "resources": [
          "@inboxsdk/core/pageWorld.js",
          "@inboxsdk/core/background.js"
        ],
        "matches": [
          "https://mail.google.com/*"
        ]
      }
    ]
  }
```

See [with-inbox-sdk](https://github.com/PlasmoHQ/examples/tree/main/with-inbox-sdk)
